<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
      <button @click="searchUsers">Search</button>
    </div>
  </section>
</template>

<script>
import pubsub from "pubsub-js";
import axios from 'axios'
export default {
  name: "Search",
  data(){
    return{
      keyWord:''
    }
  },
  methods:{
    searchUsers(){
      /*全局事件总线
      *  //请求前更新List的数据
      this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
          response => {
            // console.log('请求成功了',response.data.items)
            //请求成功后更新的List数据
            // this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items});
            pubsub.publish('updateListData',{isLoading:false,errMsg:'',users:response.data.items});
          },
          error => {
            console.log('请求失败了',error.message)
            //请求失败后更新的List数据
            this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]});
          }
      )
      * */

      //消息被订阅请求
      //请求前更新List的数据
      pubsub.publish('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]});
      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
          response => {
            //请求成功更新List的数据
            pubsub.publish('updateListData',{isLoading:false,errMsg:'',users:response.data.items});
          },
          error => {
            console.log('请求失败了',error.message)
            pubsub.publish('updateListData',{isLoading:false,errMsg:error.message,users:[]});
          }
      )
    }
  }
}
</script>

<style scoped>

</style>